/* 全局样式 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}

/* 容器布局 */
.container {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 10fr 1fr;
    height: 100vh;
    gap: 5px;
}

/* 区域样式 */
.left-top, .right-top {
    padding: 10px;
    overflow: auto;
    border: 1px solid #ccc;
}
.left-top {
    grid-row: 1;
    grid-column: 1;
}
.right-top {
    grid-row: 1;
    grid-column: 2;
}

.bottom {
    grid-row: 2;
    grid-column: 1 / span 2;
    border-top: 1px solid #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#current-song {
    white-space: nowrap;        /* 不换行 */
    overflow: hidden;          /* 隐藏超出部分 */
    text-overflow: ellipsis;   /* 使用省略号表示超出部分 */
    width: 200px;              /* 设置宽度，您可以根据需要调整 */
    display: inline-block;      /* 使元素表现得像块级元素，从而限制其宽度 */
}

/* 搜索框样式 */
.search-bar {
    margin-bottom: 10px;
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* 列表样式 */
.item-list{
    list-style-type: none;
    padding: 0;
}

.selected-list {
    list-style-type: none; /* 移除列表项目的默认样式 */
    padding: 0; /* 移除内边距 */
}

.selected-item {
    display: flex;                   /* 使用 flexbox */
    justify-content: space-between;  /* 保证子项之间有间距 */
    align-items: center;            /* 垂直居中对齐 */
    height: 40px;                   /* 固定高度 */
    overflow: hidden;               /* 隐藏溢出内容 */
    white-space: nowrap;            /* 不换行 */
    cursor: pointer;                /* 鼠标悬停时变成手指状 */
    padding: 5px;                   /* 内边距 */
    border-bottom: 1px solid #ccc;  /* 下边框 */
}

.selected-item .song-title {
    overflow: hidden;               /* 隐藏溢出内容 */
    text-overflow: ellipsis;       /* 超出部分用省略号表示 */
    white-space: nowrap;            /* 不换行 */
    flex-grow: 1;                  /* 允许文本项占据剩余空间 */
}

.remove-btn {
    margin-left: 10px;              /* 给删除按钮一点左侧边距 */
    cursor: pointer;                /* 鼠标悬停时变成手指状 */
    flex-shrink: 0;                /* 确保删除按钮不收缩 */
}


.item{
    display: flex;
    justify-content: space-between;
    padding: 5px;
    margin: 3px 0;
    border-bottom: 1px solid #ddd;
}

.item:hover, .selected-item:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.remove-btn {
    color: red;
    cursor: pointer;
    font-weight: bold;
}
/*右上块标题字体*/
.styled-paragraph {
    color: black;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 5px;
    text-align: center;
}
/*循环按钮样式*/
.loop-select {
    position: relative;
    display: inline-block;
}

/* 样式化下拉框 */
select {
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(135deg, #cccaff, #c9c9ff);
    color: black;
    cursor: pointer;
    appearance: none; /* 去掉默认下拉样式 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s;
}

select:focus {
    outline: none; /* 移除焦点轮廓 */
}

select:hover {
    background: linear-gradient(135deg, #8985ff, #7874fd); /* 鼠标悬停时的背景色 */
    color: black; /* 鼠标悬停时的文字颜色 */
}

/* 自定义下拉箭头 */
.loop-select::after {
    content: '△'; /* 下拉箭头 */
    font-size: 25px;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    color: white;
    pointer-events: none; /* 禁止事件触发 */
}

.nextButton{
    padding: 10px 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background: linear-gradient(135deg, #cccaff, #c9c9ff);
    color: black;
    cursor: pointer;
    transition: background 0.3s;
}

.nextButton:hover{
    background: linear-gradient(135deg, #8985ff, #7874fd); /* 鼠标悬停时的背景色 */
    color: black; /* 鼠标悬停时的文字颜色 */
}